<template>
    <div class="box">
        <header class="header">
            <van-nav-bar :title="this.brand" left-text="返回" left-arrow
            @click-left="onClickLeft">
              <template #left>
                <van-icon name="arrow-left" size="18" />
              </template>
                <template #right>
                    <van-popover
                        v-model="showPopover"
                        trigger="click"
                        theme='dark'
                        :actions="actions"
                        @select="onSelect"
                         placement="bottom-end"
                        >
                        <template #reference>
                            <!-- <van-button type="primary">浅色风格</van-button> -->
                            <van-icon name="more-o" size="18" />
                        </template>
                    </van-popover>
                </template>
            </van-nav-bar>
        </header>
        <div class="content">
            <div class="swiper">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item, index) in banners" :key="index">
                    <van-image :src="item" fit="cover" @click="imgPre(index)"/>
                </van-swipe-item>
                </van-swipe>
                <div class="vid" @click="show=!show"><span>00'30</span></div>
                <van-popup v-model="show">
                  <video autoplay controls width='375px' src="https://jvod.300hu.com/vod/product/2c734922-a63d-4c92-b965-0d70d4d65f6b/75f44d6c9d4d4673ab586585d26ca771.mp4"></video>
                </van-popup>
            </div>
            <div class="detailInfo">
                <p>￥<span>{{originprice}}</span></p>
                <van-tag type="danger">{{brand}}</van-tag>
                <van-tag type="primary">{{category}}</van-tag>
                <i>{{proname}}</i>
                <b>{{desc}}</b>
            </div>
        </div>
        <van-goods-action v-if="issale === 0">
            <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-goods-action-icon icon="cart-o" text="购物车" @click="shop"/>
            <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
            <van-goods-action-button type="warning" text="该商品已售空" disabled/>
        </van-goods-action>
        <van-goods-action v-else>
            <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-goods-action-icon icon="cart-o" text="购物车" @click="shop"/>
            <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
            <van-goods-action-button type="warning" text="加入购物车" @click='addShop'/>
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
        <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
            />
    </div>
</template>

<script>
import Vue from 'vue'
import { getDateilList } from '@/api/detail'
import { addCart } from '@/api/cart.js'
import { Popup, ShareSheet, Toast, Popover, NavBar, GoodsAction, GoodsActionIcon, GoodsActionButton, Tag, Swipe, SwipeItem, Image as VanImage, ImagePreview } from 'vant'

Vue.use(Popup)
Vue.use(ShareSheet)
Vue.use(Toast)
Vue.use(Popover)
Vue.use(NavBar)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)
Vue.use(Tag)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(getDateilList)
Vue.use(VanImage)
Vue.use(ImagePreview)

export default {
  data () {
    return {
      show: false,
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: '首页', icon: 'home-o' }, { text: '分类', icon: 'home-o' }, { text: '我的嗨购', icon: 'home-o' }, { text: '浏览记录', icon: 'home-o' }, { text: '分享', icon: 'home-o' }],
      proid: '',
      banners: [],
      brand: '',
      category: '',
      desc: '',
      discount: '',
      originprice: '',
      proname: '',
      issale: ''
    }
  },
  async mounted () {
    this.proid = this.$route.params.proid
    const res = await getDateilList(this.proid)
    // console.log(res.data.data)
    this.banners = res.data.data.banners[0].split(',')
    this.proid = res.data.data.proid
    this.brand = res.data.data.brand
    this.category = res.data.data.category
    this.desc = res.data.data.desc
    this.discount = res.data.data.discount
    this.originprice = res.data.data.originprice
    this.proname = res.data.data.proname
    this.issale = res.data.data.issale
  },
  methods: {
    shop () {
      this.$router.push('/cart')
    },
    addShop () {
      if (localStorage.getItem('isLogin') === 'true') {
        addCart({
          userid: localStorage.getItem('userid'),
          proid: this.proid,
          num: 1
        }).then(res => {
          console.log(res)
          console.log(localStorage.getItem('userid'))
        })
      } else {
        Toast('请先登录')
        this.$router.push('/login')
      }
    },
    imgPre (index) {
    //   console.log(this.banners)
      ImagePreview(this.banners)
    //   console.log(index)
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    onSelect (action) {
    //   console.log(action.text)
      if (action.text === '首页') {
        this.$router.push('/')
      } else if (action.text === '分类') {
        this.$router.push('/kind')
      } else if (action.text === '我的嗨购') {
        this.$router.push('/user')
      } else if (action.text === '浏览记录') {
        Toast('开发中')
      } else {
        this.showShare = true
      }
    }
  }
}
</script>

<style scoped>
.swiper{
    position:relative;
}
.swiper .vid{
    position:absolute;
    bottom :30px;
    left :50%;
    transform :translateX(-50%);
    width :70px;
    height :30px;
    background: url('');
    background-size: contain;
    background-repeat: no-repeat;
    font-size:14px;
    display:flex;
    justify-content: center;
    align-items: center;
}
.swiper .vid span{
  margin-left:18px;
  margin-bottom:4px;
}
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    height:370px;
  }
  .my-swipe .van-swipe-item img{
      width:100%;
      height:370px;
  }
  .content{
    overflow-x:hidden;
  }
  .content .detailInfo{
      margin-top:10px;
      margin-left:10px;
  }
  .content .detailInfo p{
      color:red;
      font-size:16px;
      margin-bottom: -10px;
  }
  .content .detailInfo p span{
      font-size:28px;
  }
  .content .detailInfo i{
      margin-top:2px;
      font-size:18px;
      font-style:normal;
      font-weight: bold;
      width:369px;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
  }
  .content .detailInfo b{
    display:block;
    font-weight: normal;
    font-size:12px;
    height:60px;
    line-height:20px;
    margin-top:5px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }
  .van-nav-bar .van-icon{
      color:black;
  }
  .van-nav-bar__right .van-popover__wrapper{
      position:relative;
  }
  .van-icon.van-icon-more-o{
      position:absolute;
    top:-10px;
    right:4px;
  }
  .van-icon-more-o::before{
    font-size:20px;
  }
</style>
